<template>
  <div class="JForm">
    <slot name="default"></slot>
    <div @click="submited" class="footBtn">
      <slot name="Footer">
        <span class="defaultBtn">提交</span>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent,onUnmounted} from 'vue'
/*
  mitt 这个事件库非常非常的好用  适用于组件之之间的通讯
*/ 
import mitt from 'mitt'
// 使用 type 关键字来自定义类型  如一下自定义了一个返回值是布尔类型的函数
type ValidateFunc = () => boolean
export const emitter = mitt()  
export default defineComponent({
  emits:['submitform'], // 这里有一个语法规范问题 即使自定义的事件中不要出现大写的字母
  setup(props,context){
    // 数组类型是使用 : 来设置  不是使用 = 
    const funcArr:ValidateFunc[] = []
    const submited = ()=>{
      const status = funcArr.map(fun=>fun()).every(result=>result)
      console.log('dtatatatat',status)
      context.emit('submitform',status)
    }
    const callback = (fuc:any)=>{
      /*
        实现点击确定按钮判断是否成功的思路是将 子组件中判断是否成功的function传递到父组件 
          父组件只要点击按钮 就去执行这些个function
      */ 
      funcArr.push(fuc)
    }
    emitter.on('creat',callback)
    onUnmounted(()=>{
      emitter.off('creat', callback)
    })
    return {
      submited
    }
  }
})
</script>

<style lang="less" scoped>
.footBtn{
  display: flex;
  margin-top: 5px;
}
</style>